<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>Zapatec DHTML Calendar</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" media="all" href="../themes/winxp.css" title="winxp" >
		<link href="../doc/css/zpcal.css" rel="stylesheet" type="text/css">
		<link href="../doc/css/template.css" rel="stylesheet" type="text/css">
		<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">


		<!-- import the calendar script -->
		<script type="text/javascript" src="../src/utils.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- import the language module -->
		<script type="text/javascript" src="../lang/calendar-en.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->

		<!-- import the calendar setup script -->
		<script type="text/javascript" src="../src/calendar-setup.js"></script>
	</head>
	<body>
		<table class='zpStandard' width='800'> 
			<tr>
				<td>
					<div class="topMenuHeader">
						<div class="logo">
							<a href='http://www.zapatec.com'><img src='../doc/images/logoNew.gif' alt='Zapatec logo' border='0'></a>
						</div>
						<div class="btn1">
							<a href="https://www.zapatec.com/zadmin/buy.jsp"><img src="../doc/images/buttonBuy.png" alt='My Account' border="0"></a>                                                                                                                                                                 </div>
						<div class="btn1">
							<a href="http://www.zapatec.com/website/main/pricing.jsp"><img src="../doc/images/buttonPricing.png" alt='My Account' border="0"></a>
						</div>
					</div>

				</div>

			<a href='example5.html' style='float:left; margin-left:2em; margin-top:.5em;'> <img border='0' src='previous.gif' alt='previous Javascript Calendar Example'></a>
			<a href='example7.html' style='float:right; margin-right:2em; margin-top:.5em;'><img border='0' src='next.gif' alt='previous Javascript Calendar Example'></a>
<div class='zpCalSubheader' style='text-align:center'> Flat Calendar, extra information for certain days</div>

<div class='zpCalDemoText'>

	<div id="flatcal" style="float: right"></div>

	<ol>
		<li> This is a flat or "in the page" Zapatec.Calendar. It is displayed when the page loads rather than when the user clicks a button.</li>

		<li> Certain days contain  <strong> extra information </strong> and are displayed differently.
		The following days have extra information.

		<br/>
		<br/>
		<ul>
			<li> January 1 displays "New Year."
			<li> May 5 2004 displays "Cinco de Mayo."
			<li> July 4 displays "Fourth of July."
			<li> July 14  displays "Quatorze Juillet."
		</ul>
		</li>
	</ol>

		<br/>
		Use CSS to control the style of the displaying the extra information.
		<br/>
		<br/>
		<br/>
		<br/>


	<script type="text/javascript">
		<!--  to hide script contents from old browsers
		// define info for dates in this table:
		var dateInfo = {
			"0101" : "New Year",
			"0505" : "Cinco de Mayo",
			"0604" : "Fourth of July",
			"0714" : "Quatorze Juillet"
		};

		function getDateText(date, y, m, d) {
			var inf = dateInfo[date.print("%m%d")];
			if (!inf) {
				return d + "<br/>&nbsp;";
				} else {
				return d + "<br/><span class='zpCalDayInfo'>" + inf + "<" + "/span>";
			}
		};
		function flatCallback(cal) {
			if (cal.dateClicked) {
				// do something here
				window.status = "Selected: " + cal.date;
				var inf = dateInfo[cal.date.print("%Y%m%d")];
				if (inf) {
					window.status += ".  Additional info: " + inf;
				}
			}
		};
		Zapatec.Calendar.setup({
			flat: "flatcal",
			dateText: getDateText,
			flatCallback: flatCallback
		});
		// end hiding contents from old browsers  -->
	</script>
	<noscript>
		<br/>
		This page uses a <a href='http://www.zapatec.com/website/main/products/prod1/'> Javascript Calendar </a>, but
		your browser does not support Javascript. 
		<br/>
		Either enable Javascript in your Browser or upgrade to
		a newer version.
	</noscript>

</div>

	<div class="footer" style='text-align:center; margin-top:2em'>
		<br/>
		&copy; 2004 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
	</div>
			</td>
		</tr>
	</table>

</body>
</html>
